<template>
	<view>
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<uni-fab :content="fab_content" :pattern="fab_pattern" @trigger="trigger"></uni-fab>
		<view class="report-card">
			<view class="card-list" v-if="type == 1" @tap="open">
				<view class="left-box">报修类别</view>
				<view class="right-box">
					<view class="text">{{text}}</view>
					<image src="../../../static/images/right.png" mode="" class="right-img"></image>
				</view>
			</view>
			<view class="card-list"  @tap="opencate" v-if="type == 1 || type == 3">
				<view class="left-box" v-if="type == 1">故障类型</view>
				<view class="left-box" v-if="type == 3">选择类型</view>
				<view class="right-box">
					<view class="text">{{cate_name}}</view>
					<image src="../../../static/images/right.png" mode="" class="right-img"></image>
				</view>
			</view>
			<view class="card-list" @tap="opentime" v-if="repair_type == 2">
				<view class="left-box">上门时间</view>
				<view class="right-box">
					<view class="text">{{repair_time}}</view>
					<image src="../../../static/images/right.png" mode="" class="right-img"></image>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="container-box">
				<view class="input-box">
					<textarea maxlength='1000' v-model="aricle_title" value="" placeholder="请输入内容" class="input-btn" />
				</view>
				<view class="">
					<sunuiUpimg :upImgConfig="upImgBasic" @onUpImg="upBasicData" @onImgDel="delImgInfo" ref="uImage"></sunuiUpimg>
				</view>
			</view>
			<view class="tips">
				还可上传{{imgnum}}张图片，已上传{{imglength}}张（非必填）
			</view>
		</view>
		<view  style="display: flex;flex-direction: row;align-items: center;margin-left: 48rpx;margin-top: 30rpx;" v-if="repair_type == 2 && alltext">
			<image src="../../../static/images/zhuyi.png" mode="" style="width: 28rpx;height: 28rpx;display: block;"></image>
			<view class="tips" style="margin-left: 15rpx;font-size: 28rpx;">
				{{alltext}}
			</view>
		</view>
		<view class="report-card">
			
		</view>
		<view class="btn">
			<button type="primary" :style="btn_style" class="btn-pry" @tap="uPublishTap">提交</button>
		</view>
		<uni-popups ref="popup" type="center">
			<view style="width: 500rpx;">
				<view class="dot-box" v-for="(item,index) in listData">
					<view class="dot" @tap="selectindex(index,item.cate_name,item.id)" :class="num == index? 'active':''"></view>
					<view class="dot-text">{{item.cate_name}}</view>
				</view>
			</view>
		</uni-popups>
		<uni-popups ref="popups" type="center">
			<view style="width: 500rpx;">
				<view class="dot-box" v-for="(item,index) in catelist" @tap="selectindex1(index,item.big_type,item.text)">
					<view class="dot"  :class="num1 == index? 'active':''"></view>
					<view class="dot-text">{{item.text}}</view>
				</view>
			</view>
		</uni-popups>
		<w-picker
			mode="limit" 
			dayStep="60"
			startHour="00"
			endHour="24"
			minuteStep="1"
			afterStep="30"
			@confirm="onConfirm"
			ref="limit" 
			themeColor="#f00"
		></w-picker>
		
		<lb-picker ref="picker1"
		  v-model="value1"
		  mode="multiSelector"
		  :list="list"
		  :level="2"
		  @change="handleChange"
		  @confirm="handleConfirm"
		  @cancle="handleCancle">
		</lb-picker>
	</view>
</template>
<script>
	import sunuiUpimg from "../../../appComponent/uni/sunui-upimg/sunui-upimg-basic.vue"
	import uniPopups from "../../../appComponent/uni/uni-popups/uni-popups.vue"
	import uniFab from '../component/uni-fab/uni-fab.vue';
	import wPicker from "../component/w-picker/w-picker.vue";
	import LbPicker from '../../../appComponent/uni/lb-picker'
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getwaterReport = () => {
		common.post('HouseApi&a=get_repair_cate', {
			village_id: _this.village_id,
			repair_type: _this.repair_type,
		}, data => {
			console.log("nnnnnnn", data)
			_this.alltext = data.repair_config;
			if (data.cate_list && data.cate_list[0].children && data.cate_list[0].children.length == 0) {
				_this.listData = data.cate_list
				_this.$refs.popup.open()
			}else if(data.cate_list && data.cate_list[0].children && data.cate_list[0].children.length > 0) {
				_this.list = data.cate_list
				
				_this.$refs.picker1.show()
			}
		});
	}
	
	
	
	
	export default {
			data() {
				return {
					userInfo:{avatar: '../../../static/images/return-top.png', nickname: '昵称'},
					aricle_title:'',
					alltext: '',
					basicArr: [],
					listData:{},
					fab_content: [],
					fab_pattern:{},
					imglength: 0,
					imgnum: 9,
					type:0,
					title: '',
					btncolor: '',
					btn_style: '',
					// 基础版配置
					upImgBasic: {
						// 后端图片接口地址
						basicConfig: {
							url: common.requestDomain + 'appapi.php?g=Appapi&c=HouseApi&a=utilities_image'
						},
						// 是否开启提示(提醒上传图片的数量)
						tips: true,
						// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
						notli: true,
						// 图片数量
						count: 9,
						// 相机来源(相机->camera,相册->album,两者都有->all,默认all)
						sourceType: 'all',
						// 是否压缩上传照片(仅小程序生效)
						sizeType: true,
						// 上传图片背景修改 
						upBgColor: '#E8A400',
						// 上传icon图标颜色修改(仅限于iconfont)
						upIconColor: '#fff',
						// 上传svg图标名称
						// upSvgIconName: 'icon-card',
						// 上传文字描述(仅限四个字)
						// upTextDesc: '上传证书',
						// 删除按钮位置(left,right,bleft,bright),默认右上角
						delBtnLocation: '',
						// 是否隐藏添加图片
						// isAddImage: false,
						// 是否隐藏删除图标
						// isDelIcon: false,
						// 删除图标定义背景颜色
						// delIconColor: '',
						// 删除图标字体颜色
						// delIconText: '',
						// 上传图标替换(+),是个http,https图片地址(https://www.playsort.cn/right.png)
						iconReplace: common.requestDomain + 'static/images/house/upimage.png',
					},  
					cat_id:0,
					village_id:0,
					pigcms_id:0,
					user_options:{},
					page_from:'',
					num:-1,
					num1: -1,
					repair_type: '',
					value1: [],
					label1: [],
					catelist: [
						{
							text: '公共报修',
							big_type: 1,
						},
						{
							text: '个人报修',
							big_type: 2,
						},
					],
					text: '',
					list: [],
					repair_time: '',//维修时间
					cate_name: '',
					cate_id:'',
				};
			},
			onShow() {
				// #ifdef H5
					common.hideWxShare()
				// #endif
				
				if (!app.globalData.is_login){
					_this.user_options = {
						toLogin: true
					};
				}
			},
			onLoad: function (options) {
			  _this = this;
			  console.log("报修类型",options.type)
			  _this.type = options.type;
			  _this.title = decodeURIComponent(options.title);
			  
			  if(options.from){
				  _this.page_from = options.from;
			  }
			  
			  common.setMainColor(_this, function(config) {
				_this.btncolor = app.globalData.config.config.mobile_head_color;
				_this.btn_style = 'background-color: ' + _this.btncolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.btncolor + ';';
			  	_this.fab_pattern = {
			  		buttonColor: app.globalData.config.config.mobile_head_color
			  	}
			  	if (app.globalData.tabBar && app.globalData.tabBar.list) {
			  		_this.fab_content = app.globalData.tabBar.list;
			  	}
			  });
			  uni.setNavigationBarTitle({
			  	title: _this.title
			  });
			  
			  if(app.globalData.userInfo){
				  _this.userInfo.avatar = app.globalData.userInfo.avatar;
				  _this.userInfo.nickname = app.globalData.userInfo.nickname;
				  console.log('_this.userInfo', _this.userInfo);
			  }
			  
			  var res	= uni.getStorageSync("village_key");
			  _this.village_id = res.village_id;
			  _this.pigcms_id = res.pigcms_id;
			  
			  // getwaterReport();
			},
			mounted() {
			},
			components: {
				sunuiUpimg,
				uniFab,
				uniPopups,
				wPicker,
				LbPicker
			},
			methods: {
				getLocation_msg(res){
					console.log('反馈信息：', res);
					_this.address = res.name;
				},
				handleCancle (item) {
					console.log('cancle::', item)
				},
				handleChange (item) {
					console.log('change::', item)
				},
				handleConfirm (item) {
					console.log('confirm::', item)
					if(item.value){
						console.log("asjdbasjkdbsadjh",item.value[1])
						_this.cate_id = item.value[1]
						_this.cate_name = _this.list[item.index[0]].label + "-" + _this.list[item.index[0]].children[item.index[1]].label;
						console.log("askdbaskjd",)
					}else{
						_this.cate_id = _this.list[0].children[0].id
						_this.cate_name = _this.list[0].label + "-" + _this.list[0].children[0].label;
						console.log("tttttttttt",_this.cate_id)
					}
					
					
				},
				tapChange(e){
					console.log(e.cat_id)
					_this.cat_id = e.cat_id;
				},
				open(){
					_this.$refs.popups.open()
				},
				opentime(){
					_this.$refs.limit.show();
				},
				opencate(){
					if(_this.type == 1){
						if(_this.text == ''){
							uni.showModal({
								title: common.changeTxt('提示'),
								content: common.changeTxt('请选择报修类别'),
								showCancel: false,
								confirmText: common.changeTxt('确定'),
								success: function(res) {
									if (res.confirm) {
										
									}
								}
							});
						}else{
							getwaterReport();
							// _this.$refs.picker1.show()
						}
					}else{
						getwaterReport();
					}
					
				},
				onConfirm(val){
					console.log("val",val)
					_this.repair_time = val.result
				},
				selectindex(index,cate_name,id){
					_this.cate_name = cate_name
					_this.num = index;
					_this.cate_id = id
					_this.$refs.popup.close()
				},
				selectindex1(index,big_type,text){
					_this.repair_type = big_type;
					_this.num1 = index;
					_this.text = text;
					_this.$refs.popups.close()
				},
				uPublishTap() {
					if(!_this.aricle_title || _this.aricle_title == ''){
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('您需要输入一些文字才能上报'),
							showCancel: false,
							confirmText: common.changeTxt('好的'),
							success: function(res) {
								
							}
						})
						return false;
					}
					var postData = {
						village_id: _this.village_id,
						pigcms_id: _this.pigcms_id,
						content: _this.aricle_title,
						inputimg: _this.basicArr,
						type: _this.type,
						cate_id: _this.cate_id,
						repair_type: _this.repair_type,
						repair_time: _this.repair_time,
					};
					console.log('_this.basicArr.postData', postData);
					
					common.post('HouseApi&a=add_utilities', postData
					, data => {
					  uni.showModal({
					  	title: common.changeTxt('提示'),
					  	content: common.changeTxt('上报成功'),
					  	showCancel: false,
					  	confirmText: common.changeTxt('好的'),
					  	success: function(res) {
					  		if (res.confirm) {
								if(_this.page_from == 'list'){
									uni.navigateBack();
								}else{
									uni.redirectTo({
										url: '/pages/village/my/waterReportlist?type=' + _this.type + '&title=' + _this.title
									});
								}
					  		}
					  	}
					  });
					});
				},
				// 删除图片 -2019/05/12(本地图片进行删除)
				async delImgInfo(e) {
					console.log('你删除的图片地址为:', e, this.basicArr.splice(e.index, 1));
					_this.imglength = _this.imglength - 1;
					_this.imgnum = _this.imgnum + 1
				},
				// 基础版
				async upBasicData(e) {
					console.log('===>',e);
					// 上传图片数组
					let arrImg = [];
					for (let i = 0, len = e.length; i < len; i++) {
						try {
							if (e[i].path_server != "") {
								await arrImg.push(e[i].path_server);
							}
						} catch (err) {
							console.log('上传失败...');
						}
					}
					// 图片信息保存到data数组
					this.basicArr = arrImg;
					 _this.imglength = this.basicArr.length;
					 _this.imgnum = _this.imgnum - 1;
					// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
					if (arrImg.length == this.upImgBasic.count) {
						uni.showToast({
							title: `上传成功`,
							icon: 'none'
						});
					}
				},
				trigger(param) {
					var url = param.item.pagePath;
					if (_this.village_id) {
						url = common.changeURLArg(url, 'village_id', _this.village_id);
					}
					if (_this.pigcms_id) {
						url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
					}
					console.log('tabbar url', url);
					common.parseUrl(url, '', false, param.item.text);
				},
			}
		}
	
</script>

<style>
	.container {
		margin: 0px;
		background: #FFFFFF;
		overflow: hidden;
		padding-bottom: 50rpx;
		margin-top: 15rpx;
	}
	.container-box {
		background: #FFFFFF;
		padding: 27rpx;
	}
	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.info-icon {
		width:78rpx;
		height:78rpx;
	}
	.info-img {
		width: 100%;
		height: 100%;
	}
	.name {
		font-size:30rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:78rpx;
		padding-left: 18rpx;
	}
	.input-box {
		margin-top: 40rpx;
	}
	.input-btn {
		height: 200rpx;
		width: 100%;
	}
	.banner {
		background: #FFFFFF;
		overflow: hidden;
		padding-left: 27rpx;
		margin-top: 15rpx;
	}
	.assort {
		background: #FFFFFF;
		margin-top: 15rpx;
		padding: 18rpx 0;
	}
	.cat_text {
		font-size:32rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:60rpx;
	}
	.assort-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.opt {
		background: #FFFFFF;
	}
	.opt-assort {
		height:65rpx;
		background:rgba(244,244,244,1);
		border-radius:33rpx;
		padding: 0 32rpx;
		font-size:24rpx;
		font-weight:500;
		color:rgba(102,102,102,1);
		line-height:65rpx;
		margin: 15rpx 0rpx 15rpx 27rpx;
	}
	.address {
		margin-left: 0rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		border:2rpx solid rgba(209,209,209,1);
		border-radius:30rpx;
		display:inline-block;
	}
	.address-text {
		font-size:24rpx;
		font-weight:500;
		color:rgba(204,204,204,1);
		line-height:40rpx;
		padding: 8rpx 20rpx 8rpx 10rpx;
	}
	.address-text:before {
		content: "";
		width:45rpx;
		height:45rpx;
		background: url(../../../static/images/dingwei.png) no-repeat;
		background-size: cover;
		display: block;
		float: left;
	}
	.address-text.has{
		color:black;
	}
	.btn {
		margin: 74rpx 0rpx;
		height: 100%;
		width: 100%;
	}
	.btn-pry {
		width: 550rpx;
		height:98rpx;
		background: #2681f3;
		border-radius:49rpx;
		line-height: 98rpx;
		margin: 0 auto;
		margin-top: 220rpx;
	}
	.content-class {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	.tips {
		width: 100%;
		margin-left: 48rpx;
		color: #CCCCCC;
	}
	.report-card {
		margin-top: 15rpx;
		background-color: #FFFFFF;
	}
	.card-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0rpx 15rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #F1F1F1;
	}
	.card-list:last-child {
		border-bottom: 0rpx solid #F1F1F1;
	}
	.left-box {
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-shrink: 0;
	}
	.right-box {
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.text {
		font-size: 28rpx;
		color: #666666;
		padding-left: 30rpx;
	}
	.right-img {
		width: 30rpx;
		height: 30rpx;
		display: block;
	}
	.dot-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin: 20rpx 30rpx;
	}
	.dot {
		width: 30rpx;
		height: 30rpx;
		border-radius: 30rpx;
		border: 1rpx solid #CCCCCC;
		background-color: #FFFFFF;
	}
	.dot-text {
		margin-left: 15rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.active {
		width: 12rpx;
		height: 12rpx;
		border-radius: 15rpx;
		border: 10.5rpx solid #2681f3;
		background-color: #FFFFFF;
	}
</style>
